<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<input type="button" value="点我发送ajax请求" onclick="sendAjax()">

<div id="box" style="width: 100px;height: 100px; background-color:red;"></div>

<script>
    function sendAjax(){
        var name = "小白";

        //1.创建核心对象
        var xhttp;
        //根据不同浏览器创建
        if(window.XMLHttpRequest){
            xhttp = new XMLHttpRequest();
        }else{
            //ie5  ie6
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        //2.发送请求  请求方式  请求地址   异同步
        xhttp.open("GET","http://localhost:8080/ajax/hello1?name="+name);//指定发送的要求
        xhttp.send();

        //3.判断并处理响应
        xhttp.onreadystatechange=function (){
            //判断是否请求响应成功
            if(xhttp.readyState == 4 && this.status == 200){
                document.querySelector("#box").innerHTML=xhttp.responseText;
            }

        }










    }


</script>

</body>
</html>